<template>
	<view class="qiqb-ctx  " :class="img_show==true?'on':''">
		<view class="qiqb-ctx-box" v-show="img_show">
			<text @click="img_show=false"></text>
			<image :src="canvasImg" mode="aspectFit"></image>
		</view>
		<view class="qiqb-ctx-btns u-border-bottom" v-if="!img_show">
			<view>邀请好友</view>
			<view>请保存分享码, 或复制分享链接邀请好友</view>
			<view>
				<text @click="share">微信好友</text>
				<text @click="init">生成海报</text>
				<text @click=" copyshare">分享链接</text>
			</view>
		</view>
		<view class="btn-box" v-else>
			<view class="btn" @click="capture">保存到相册</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "share",
		data() {
			return {
				show: true,
				img_show: false,
				mode: 'img',
			}
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			},
			canvasImg: {
				type: String,
				default: () => {
					return ''
				}
			}
		},
		mounted() {
			console.log("this.data", this.data)
			console.log("this.canvasImg", this.canvasImg)
		},
		methods: {
			init() {
				this.img_show = true
				console.log("this.canvasImg", this.canvasImg)
			},
			share() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
			copyshare() {
				uni.setClipboardData({
					data: this.data.share, //要被复制的内容
					success: e => {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
					},
					fail: err => {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},

			capture() {
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.canvasImg,
					success() {
						uni.showToast({
							position: "center",
							icon: "none",
							title: "图片保存成功，请到手机相册查看"
						})
					},
					fail(e) {
						uni.showModal({
							content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg +
								"，errSubject：" + e
								.errSubject,
							showCancel: false
						});
					}
				})
				// #endif
				// #ifndef APP-PLUS
				this.savePicture(this.canvasImg)
				// #endif
			},

			savePicture(base64) {
				var arr = base64.split(',');
				var bytes = atob(arr[1]);
				let ab = new ArrayBuffer(bytes.length);
				let ia = new Uint8Array(ab);
				for (let i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i);
				}
				var blob = new Blob([ab], {
					type: 'application/octet-stream'
				});
				var url = URL.createObjectURL(blob);
				var a = document.createElement('a');
				a.href = url;
				a.download = new Date().valueOf() + ".png";
				var e = document.createEvent('MouseEvents');
				e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
				a.dispatchEvent(e);
				URL.revokeObjectURL(url);
			},
		}
	}
</script>

<style>
	.qiqb-ctx {
		position: fixed;
		right: 0;
		bottom: 0;
		bottom: 0;
		left: 0;
		display: flex;
		transition: all .3s;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 1;
		opacity: 1
	}

	.on {
		background: rgba(0, 0, 0, .6);
		top: 0;
	}

	.qiqb-ctx-box {
		position: relative;
		display: flex;
		padding: 30upx 0 40upx;
		width: 750upx;
		justify-content: center
	}

	.qiqb-ctx-box text {
		position: absolute;
		bottom: -40upx;
		display: inline-flex;
		width: 57upx;
		height: 57upx;
		background: url(img/close.png);
		background-size: 100% 100%
	}

	.qiqb-ctx-box image {
		width: 530upx;
		height: 950upx;
	}

	.qiqb-ctx-btns {
		display: flex;
		width: 750upx;
		height: 400upx;
		border-radius: 50upx 50upx 0 0;
		background: #fff;
		flex-direction: row;
		flex-direction: column;
		align-items: center
	}

	.qiqb-ctx-btns view:nth-child(1) {
		display: flex;
		padding-top: 10upx;
		height: 80upx;
		font-weight: 700;
		font-size: 30upx;
		align-items: center
	}

	.qiqb-ctx-btns view:nth-child(2) {
		height: 80upx;
		color: #666;
		font-size: 24upx
	}

	.qiqb-ctx-btns view:nth-child(3) {
		display: flex;
		padding-bottom: 30upx;
		font-size: 26upx;
		flex-direction: row;
		align-items: center
	}

	.qiqb-ctx-btns view:nth-child(3) text {
		display: flex;
		width: 250upx;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.qiqb-ctx-btns view:nth-child(3) text:nth-child(1)::before {
		display: inline-flex;
		margin-bottom: 20upx;
		width: 86upx;
		height: 86upx;
		background: url(img/1.png);
		background-size: 100% 100%;
		content: ''
	}

	.qiqb-ctx-btns view:nth-child(3) text:nth-child(2)::before {
		display: inline-flex;
		margin-bottom: 20upx;
		width: 86upx;
		height: 86upx;
		background: url(img/2.png);
		background-size: 100% 100%;
		content: '';
		border-radius: 50%;
	}

	.qiqb-ctx-btns view:nth-child(3) text:nth-child(3)::before {
		display: inline-flex;
		margin-bottom: 20upx;
		width: 86upx;
		height: 86upx;
		background: url(img/3.png);
		background-size: 100% 100%;
		content: ''
	}

	.qiqb-ctx-close {
		display: flex;
		padding-bottom: 50upx;
		width: 100%;
		height: 150upx;
		background: #fff;
		font-size: 32upx;
		align-items: center;
		justify-content: center
	}

	.btn-box {
		display: flex;
		width: 300upx;
		height: 100upx;
		font-size: 32upx;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		//margin-bottom: 200upx;
		margin-top: 60upx;
	}

	.btn {
		display: flex;
		width: 300upx;
		height: 80upx;
		background: #fff;
		border-radius: 40upx;
		align-items: center;
		justify-content: center
	}
</style>
